<template>
  <el-container>
    <el-header class="header-form" style="font-size: 40px">疫苗查询系统</el-header>
    <el-main>
      <el-form
          :model="loginForm"
          status-icon
          :rules="rules"
          ref="loginForm"
          label-width="100px"
          class="demo-loginForm login-form">
        <el-form-item label="用户名" prop="pass">
          <el-input type="username" v-model="loginForm.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-radio-group v-model="card">
            <el-radio label="admin" >系统管理员</el-radio>
            <el-radio label="user" >用户</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item class="login-but">
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm('loginForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "Login",
  data() {
    var validateAccount = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'));
      } else {
        if (this.loginForm.account !== '') {
          this.$refs.loginForm.validateField('account');
        }
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else {
        callback();
      }
    };
    return {
      card: '',
      loginForm: {
        account: '',
        password: ''
      },
      rules: {
        account: [
          {validator: validateAccount, trigger: 'blur'}
        ],
        password: [
          {validator: validatePass, trigger: 'blur'}
        ]
      }
    };
  },
  methods: {
    submitForm() {
      if (this.card === 'admin') { // 判断是否为管理员
        axios({
          url: `http://localhost:88/api/admin/sAdmin/login`,
          method: 'post',
          data: {
            sAccount: this.loginForm.account,
            sPassword: this.loginForm.password
          }
        }).then((res) => {
          if (res.data.data === 100){
            this.$alert('用户名不存在','提示',{
              confirmButtonText:'确定'
            })
          }
          if (res.data.data === 200){
            this.$alert('登陆成功','提示',{
              confirmButtonText:'确定'
            }).then(()=>{
              localStorage.setItem("adminManager",JSON.stringify(res.data.msg))
              this.$router.replace("/adminManager")
            })
          }
        })
      }else {
        if (this.card === 'user') {  //判断是否为用户
          axios({
            url: `http://localhost:88/api/user/sAdmin/login`,
            method: 'post',
            data: {
              sAccount: this.loginForm.account,
              sPassword: this.loginForm.password
            }
          }).then((res) => {
            this.$router.push("/")
          })
        } else {
          console.log('error submit!!');
        }
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style scoped>
.login-form {
  position: absolute;
  width: 300px;
  left: 600px;
  right: 0;
  top: 250px;
}
</style>
